import React, { Component } from 'react'
import styles from './style.less'
export default class domo1 extends Component {
    state={
        flage:true,
        flage1:false,
        flage2:false,
        flage3:false
    }
    fun=()=>{
        this.setState({
            flage:true,
            flage1:false,
            flage2:false,
            flage3:false
        })
    }
    fun1=()=>{
        this.setState({
            flage:false,
            flage1:true,
            flage2:false,
            flage3:false
        })
    }
    fun2=()=>{
        this.setState({
            flage:false,
            flage1:false,
            flage2:true,
            flage3:false
        })
    }
    fun3=()=>{
        this.setState({
            flage:false,
            flage1:false,
            flage2:false,
            flage3:true
        })
    }
    render() {
        const {flage,flage1,flage2,flage3} = this.state;
        return (
            <div>
                <header>
                    <span>&lt;</span>
                    <span>凉秋穿搭</span>
                    <span>|</span>
                </header>
                <nav>
                    <ul>
                        <li className={flage ? styles.bgRed:''} onClick={this.fun}>人气</li>
                        <li className={flage1 ? styles.bgRed:''} onClick={this.fun1}>最新</li>
                        <li className={flage2 ? styles.bgRed:''} onClick={this.fun2}>销量</li>
                        <li className={flage3 ? styles.bgRed:''} onClick={this.fun3}>价格</li>
                    </ul>
                </nav>
            </div>
        )
    }
}
